<template>
  <section class="setting-bg pv-12 ph-16">
    <h3>电表余额不足通知</h3>
    <div style="max-width: 400px;justify-content: space-between;" class="flex-row-center">
      <div class="fc-regular">电量不足短信通知</div>
      <el-switch
          v-model="lowKwhNoticeFlag"
          inline-prompt
          :active-icon="Check"
          :active-value="'1'"
          :inactive-value="'2'"
          :inactive-icon="Close"
      />
    </div>
    <div class="fs-base fc-regular mt5">（自动在设定的电量不足度数时通知入住人，请保证短信余额充足）</div>
    <div class="mt20">
       <el-radio-group v-model="lowKwh">
        <el-radio label="5" border>不足5度</el-radio>
        <el-radio label="10" border>不足10度</el-radio>
        <el-radio label="20" border>不足20度</el-radio>
        <el-radio label="50" border>不足50度</el-radio>
      </el-radio-group>
    </div>
    <el-button style="margin-top: 40px;" type="primary" @click="handleSave">保存</el-button>
  </section>
</template>
<script setup name="PreElectriNotice">
import { Check, Close, Remove } from '@element-plus/icons-vue'
import { getInfo as getConfig, edit } from '@/api/setting/waterElectricity'

const { proxy } = getCurrentInstance()
const lowKwhNoticeFlag = ref('1')
const lowKwh = ref(1)
const configId = ref('')

function getInfo() {
  getConfig().then(res => {
    const data = res.data
    lowKwhNoticeFlag.value = data.lowKwhNoticeFlag
    lowKwh.value = data.lowKwh.toString()
    configId.value = data.waterElectricityConfigId
  })
}

function handleSave() {
  edit({
    lowKwhNoticeFlag: lowKwhNoticeFlag.value,
    lowKwh: lowKwh.value,
    waterElectricityConfigId: configId.value
  }).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('保存成功')
    }
  })
}

getInfo()
</script>
